<template>
  <div style="div">
    <el-upload
      :action="http"
      list-type="picture-card"
      ref="upload"
      accept="image/jpeg, image/jpg, image/png"
      :on-preview="handlePictureCardPreview"
      :on-change="changeUpload"
      :before-upload="beforeAvatarUpload"
      :on-remove="handleRemove"
      :headers="headers"
      :limit="fileNum"
      :file-list="fileList"
      :class="{hide:hideUpload}"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt />
    </el-dialog>
  </div>
</template>
<script>
import $ from "jquery";
import serv from "@/utils/request1";
export default {
  data() {
    return {
      http: serv.defaults.baseURL + "/upload",
      dialogImageUrl: "",
      dialogVisible: false,
      hideUpload: false,
      imgFlag: [],
      imgUploadFlag: true
    };
  },
  props: {
    fileList: Array,
    fileNum: Number,
    // width: Number,
    // height: Number,
    sizeNumber: Number,
  },

  computed: {
    headers() {
      return {
        Authorization: "Bearer " + localStorage.getItem("token") // 直接从本地获取token就行
      };
    }
  },
  methods: {
    getLength(fileList) {
        this.hideUpload = fileList.length >= this.fileNum;
    },
    handleRemove(file, fileList) {
      this.hideUpload = fileList.length >= this.fileNum;
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    changeUpload(file, fileList) {
      // console.log(file,fileList)
      this.hideUpload = fileList.length >= this.fileNum;
      this.imgFlag = fileList;
    },
    beforeAvatarUpload(file) {
      var that = this;
      let sizeNumber = that.sizeNumber;
      // const isJPEG = file.type === "image/jpeg";
      // const isJPG = file.type === "image/jpg";
      // const isPNG = file.type === "image/png";
      const isLtM = file.size / 1024 / 1024 < sizeNumber;
      // const
      // if (!isJPG && !isJPEG && !isPNG) {
      //   this.$message.error("上传头像图片只能是 jpeg/jpg/png格式!");
      //   return false;
      // }
      if (!isLtM) {
        this.$message.error("上传头像图片大小不能超过" + sizeNumber + "MB!");
        return false;
      }

      //     const isSize = new Promise(function(resolve, reject) {
      //     let width = that.width;
      //     let height = that.height;
      //     let _URL = window.URL || window.webkitURL;
      //     let image = new Image();
      //     // console.log(image)
      //     // console.dir(image.width);
      //     image.onload = function() {
      //         let valid = image.width == width && image.height == height;
      //         valid ? resolve() : reject();
      //     };
      //     image.src = _URL.createObjectURL(file);
      // }).then(
      //     () => {
      //         return file;
      //     },
      //     () => {
      //         //   console.log(that.width);
      //         if (that.width != -1 && that.height != -1) {
      //             let msg =
      //                 "请选择宽度为" +
      //                 that.width +
      //                 ",高度为" +
      //                 that.height +
      //                 "的图片";
      //             that.$message.error(msg);
      //             return Promise.reject();
      //         }
      //     }
      // );
      // return isSize;
    },
   
    //字符串截取
    getCaption(obj) {
      var index = obj.lastIndexOf(".com/");
      obj = obj.substring(index + 5, obj.length);
      return obj;
    },
    submitUpload() {
      let oldList = [];
      let newList = [];
      console.log(this.$refs.upload.uploadFiles)
      for (var i = 0; i < this.$refs.upload.uploadFiles.length; i++) {
        if (this.$refs.upload.uploadFiles[i].name) {
          newList.push(this.$refs.upload.uploadFiles[i].response.data.url);
        } else {
          oldList.push(this.getCaption(this.$refs.upload.uploadFiles[i].url));
        }
      }
      this.imgFlag = [ ...oldList,...newList];
      return this.imgFlag;
    }
  }
};
</script>
<style scoped>
.div,
.div > div {
  display: inline;
}
</style>
